<template>
  <div class="test-foot-box">
    <div>{{ arr }}</div>
    <div>{{ obj }}</div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    let arr = reactive([]);
    setInterval(() => {
      // arr = [1,2,3] // 不更新
      // arr = reactive([1,2,3]) // 不更新
      arr.push(1, 2, 3); // 更新
    }, 1000);

    // 或者外面包一层，并在该对象在属性节点上进行重新指向的方式

    let obj = reactive({
      arr: [],
    });

    setInterval(() => {
      obj.arr = [1, 2, 3]; // 更新
    }, 1000);

    // // 但在第二种方式下，以结构的方式访问属性虽然没有问题，但勿在解构赋予的变量上做相同的错误操作。例如：
    // let { arr } = obj;

    // setInterval(() => {
    //   arr = reactive([1, 2, 3]); // 模板上的{{ arr }}是obj.arr，此时指向了新的响应式对象，因此不会更新
    // }, 1000);

    return { arr, obj };
  },
};
</script>

<style lang="less" scoped>
.test-foot-box {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  background-color: rgba(127, 255, 0, 0.5);
}
</style>
